<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue-2.6.12.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{msg}}</h1>
    <h1 v-text="msg"></h1>
    <h1 v-html="msg"></h1>
    <div v-if="isDis">div1</div>
    <div v-show="isDis">div2</div>
    <ul>
      <li v-for="(a,b) in eds">{{a}}</li>
    </ul>
    <table>
      <tr><td>编号</td><td>商品名</td><td>价格</td><td>数量</td><td>操作</td></tr>
      <tr v-for="(pro,index) in products"><td>{{pro.id}}</td><td>{{pro.name}}</td><td>{{pro.price}}</td><td>{{pro.num}}</td><td><a href="javascript:void(0)" @click.capture.prevent.once="changeNum(index)">增加数量</a></td></tr>
    </table>
    <button onclick="addPro()">增加</button>    <button v-on:click="addPro2">增加</button>

    <img src="../img/1.png" v-show="isDis"/>
    <button v-on:click="changeImgDis">点我</button>
  </div>
  <script type="text/javascript">
    const vm = new Vue({
      el:"#app",
      data:{
        msg:"<span style='color:red'>hello vue</span>",
        hello:"hello zhangsan",
        isDis:false,
        eds:["本科","大专","高中"],
        products:[{id:1,name:"su7",price:21,num:1},{id:2,name:"理想",price:21,num:1},{id:3,name:"小鹏",price:21,num:1}]
      },
      methods:{
        addPro2:function(){
          this.products.push({id:4,name:"byd",price:21});
        },
        changeImgDis:function(){
          this.isDis = !this.isDis;
        },
        changeNum:function(index){
          this.products[index].num++;
        }
      }
    });
    function addPro(){
      vm.products.push({id:4,name:"byd",price:21});
    }
  </script>
</body>
</html>